<template>
  <div>
    <el-form ref="pram" :model="pram" size="small" label-width="100px" @submit.native.prevent>
      <el-form-item label="身份名称" prop="code"
        :rules="[{ required: true, message: '请填写身份名称', trigger: ['blur', 'change'] }]">
        <el-input v-model="pram.code" placeholder="身份名称" clearable/>
      </el-form-item>
      <el-form-item label="身份名称" prop="name"
        :rules="[{ required: true, message: '请填写身份名称', trigger: ['blur', 'change'] }]">
        <el-input v-model="pram.name" placeholder="身份名称" clearable/>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="pram.status" active-text="显示" inactive-text="隐藏" :active-value="1"
          :inactive-value="0" />
      </el-form-item>
      <el-form-item label="权限">
      <el-tree
        ref="tree"
        :data="treeList"
        show-checkbox
        node-key="id"
        @check="getCurrentNode"
        :default-checked-keys="selectModelKeysNew"
        :props="treeProps">
      </el-tree>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="handlerSubmit('pram')">{{ isCreate === 0 ? '确定' : '更新'
        }}</el-button>
        <el-button @click="close">取消</el-button>
        <el-button @click="close1">提交权限（临时）</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { roleSave,roleUpdate,permissionAllotPerm } from '@/api/role.js'
import { getAllPermissionForTree } from '@/api/permission.js'
export default {
  // name: "edit"
  props: {
    type: {
      type: Number,
      default: 0
    },
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      constants: this.$constants,
      pram: {
        id: 0,
        name: '',
        code: '',
        rules: [],
        status: 1,
        belong: this.type
      },
      treeList:[],
      treeProps: {
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },
    }
  },
  mounted() {
    this.initEditData()
    this.getTreeList()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    close1() {
      permissionAllotPerm({roleId:this.pram.id,perms:this.pram.rules.join(',')}).then((res) => {
        this.treeList = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    //树形表权选择事件
    getCurrentNode(data,keysData){
      //console.log('data',data)
      
      console.log('getCheckedKeys',this.$refs.tree.getCheckedKeys())

      

      //console.log('data1',keysData)
      this.pram.rules=[...keysData.halfCheckedKeys,...keysData.checkedKeys];       
      console.log('pram.rules',this.pram.rules)
     
    },
    getTreeList() {
      getAllPermissionForTree().then((res) => {
        this.treeList = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    initEditData() {
      if (this.isCreate !== 1) return
      const { level, roleName, rules, status, id } = this.editData
      this.pram=this.editData
      /*this.pram.rules = rules.split(',')
      this.pram.level = level
      this.pram.roleName = roleName
      this.pram.status = status
      this.pram.id = id*/
    },
    handlerSubmit(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading = true
        if (this.isCreate === 0) {
          roleSave(this.pram).then(res => {
            this.loading = false
            this.$message.success(res.msg)
            //this.$message.success('创建身份成功')
            this.$emit('hideEditDialog')
          }).catch((err) => {
            this.loading = false
            this.$message.error(err.msg)
          })
        } else {
          roleUpdate(this.pram).then(res => {
            this.loading = false
            this.$message.success(res.msg)
            this.$emit('hideEditDialog')
          }).catch((err) => {
            this.loading = false
            this.$message.error(err.msg)
          })
        }
      })
    },
    rulesSelect(selectKeys) {
      this.pram.rules = selectKeys
    }
  }
}
</script>

<style scoped>

</style>
